<template>
    <div class="app-wrapper">
        <header>
            <div class="app-management-header-wrap">
                <div class="home-icon" @click="handleBackClick">
                    <i class="el-icon-back" style="color: #607d8b;"></i>
                </div>
                <div class="common-user-handle-wrap">
                    <i class="el-icon-search search-icon"></i>
                    <form autocomplete="off">
                        <input type="text" class="search" placeholder="智能搜索(F)..." autocomplete="off">
                    </form>
                    <div class="workflow-help-icon-wrap">
                        <el-tooltip class="item" effect="dark" content="帮助" placement="top">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
                    <div class="avatar-wrap">
                        <img src="https://pic.mingdao.com/UserAvatar/9adc214e-a74c-41b1-807b-3030091bc590.jpg?imageView2/1/w/100/h/100/q/90" style="width: 24px; height: 24px;">
                    </div>
                </div>
            </div>
        </header>
        <section class="container">
            <div class="app-wrap">
                <div class="app-side-wrap">
                    <div class="group-title">应用分类</div>
                        <ul>
                            <li>
                                <i class="el-icon-success"></i>
                                <span>必备</span>
                            </li>
                            <li>
                                <i class="el-icon-s-marketing"></i>
                                <span>营销</span>
                            </li>
                            <li>
                                <i class="el-icon-s-data"></i>
                                <span>销售</span>
                            </li>
                            <li>
                                <i class="el-icon-s-custom"></i>
                                <span>人事</span>
                            </li>
                            <li>
                                <i class="el-icon-s-check"></i>
                                <span>财务</span>
                            </li>
                        </ul>
                    </div>
                <div class="app-group-box">
                    <ul>
                        <li v-for="(item, index) in appData" :key="`appList${index}`">
                            <div class="sortable-app-item-wrap">
                                <div class="app-item-wrap">
                                    <div class="app-item" @click="handleGoto(item)">
                                        <div class="app-item-detail" style="background-color: rgb(255, 152, 0);">
                                            <i class="el-icon-picture"></i>
                                        </div>
                                        <div class="text-box">
                                            <div class="content-text">{{item.appName}}</div>
                                        </div>
                                    </div>
                                    <div class="app-item-more">
                                        <el-dropdown trigger="click" @command="(e) => handleCommand(e, item)">
                                            <span class="el-dropdown-link">
                                                <i class="el-icon-more"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item icon="el-icon-edit">重命名</el-dropdown-item>
                                                <el-dropdown-item icon="el-icon-document-copy">复制应用</el-dropdown-item>
                                                <el-dropdown-item icon="el-icon-delete" command="delApp" style="color: red;">删除应用</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="add-app-item-wrap" @click="addApp">
                                <div class="add-app-item">
                                    <i class="el-icon-plus"></i>
                                </div>
                                <div class="btn-name">添加应用</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import randomString from "../utils/generatorUID"
import { listApp, saveApp, delApp } from "../api/applicationInfoApi";
export default {
    name: 'AppList',
    data() {
        return {
            appData: []
        }
    },
    created(){
        // this.appData = this.$store.state.pageData.appData
        this.getListApp()
    },
    methods: {
        getListApp() {
            listApp().then(response => {
                if(Number(response.code) === 200){
                    this.appData = response.data
                }
            })
        },
        addApp() {
            const data = { appId: randomString(32), appName: '未命名应用'}
            // this.appData.push(o)
            // this.$store.dispatch('pageData/setAppData', this.appData);
            saveApp(data).then(response => {
                if(Number(response.code) === 200){
                    this.getListApp()
                }
            })
        },
        handleGoto(o) {
            this.$router.push( { name:'WorkSheet', params: { appId: o.appId } } );
        },
        handleCommand(command, item) {
            switch(command){
                case 'delApp': 
                    delApp({appId: item.appId}).then(response => {
                        if(Number(response.code) === 200){
                            this.getListApp()
                        }
                    })
                break;
            }
        },
        handleBackClick() {

            window.location.href = window.location.origin + '/web/index.html#/workspace'
        }
    }
}
</script>
<style lang="scss" scoped>
.app-wrapper{
    height: 100%;
    overflow: hidden;
    header{
        .app-management-header-wrap{
            display: flex;
            align-items: center;
            position: relative;
            justify-content: space-between;
            background-color: #fff;
            height: 50px;
            box-shadow: 0 1px 2px rgba(0,0,0,.24);
            z-index: 1;
            .home-icon{
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding: 0px 16px;
                cursor: pointer;
                i{
                    font-size: 20px;
                }
            }
            .common-user-handle-wrap{
                position: relative;
                flex-shrink: 0;
                padding: 0 20px;
                background: hsla(0,0%,100%,.1);
                display: flex;
                height: 100%;
                align-items: center;
                i{
                    &.search-icon{
                        position: absolute;
                        margin-left: 7px;
                        color: #9e9e9e;
                    }
                }
                .search{
                    box-sizing: border-box;
                    height: 36px;
                    padding: 0 28px;
                    border-radius: 36px;
                    border: 1px solid #ddd;
                    cursor: pointer;
                    background: rgba(0,0,0,.03);
                }
                .workflow-help-icon-wrap{
                    margin: 0 20px;
                    i{
                        color: rgba(0,0,0,.6);
                        cursor: pointer;
                    }
                }
                .avatar-wrap{
                    cursor: pointer;
                    img{
                        border-radius: 50%;
                    }
                }
            }
        }
    }
    .container{
        flex: 1 1;
        margin: 0;
        max-width: 100%;
        min-width: 0;
        height: 100%;
        position: relative;
        .app-wrap{
            display: flex;
            height: 100%;
            background-color: #fff;
            .app-side-wrap{
                box-sizing: border-box;
                width: 20%;
                height: 100%;
                padding: 12px 0;
                background-color: #fafafa;
                overflow-y: auto;
                ul{
                    padding: 0 12px;
                    margin-top: 10px;
                    li{
                        display: flex;
                        align-items: center;
                        line-height: 40px;
                        padding: 0 10px 0 12px;
                        cursor: pointer;
                        border-radius: 4px;
                        i{
                            font-size: 18px;
                            margin-top: -5px;
                        }
                        span{
                            color: #757575;
                            margin-left: 8px;
                            font-size: 13px;
                            &.bold{
                                font-weight: 700;
                            }
                        }
                        &:hover{
                            background-color: #efefef;
                        }
                    }
                }
                .group-title{
                    margin: 24px 0 10px 24px;
                    font-size: 13px;
                    color: #9e9e9e;
                    font-weight: 700;
                }
            }
            .app-group-box{
                min-width: 900px;
                margin: 0 auto;
                .action-title{
                    margin-top: 30px;
                    margin-bottom: 20px;
                    .name{
                        font-size: 20px;
                        color: #1f292e;
                    }
                }
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    .sortable-app-item-wrap{
                        .app-item-wrap{
                            position: relative;
                            margin: 16px 9px 0;
                            height: 160px;
                            -webkit-transition: .25s ease-out;
                            transition: .25s ease-out;
                            cursor: pointer;
                            .app-item{
                                box-sizing: border-box;
                                width: 132px;
                                padding: 10px 0;
                                height: 100%;
                                .app-item-detail{
                                    width: 88px;
                                    height: 88px;
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    position: relative;
                                    margin: 0 auto;
                                    cursor: pointer;
                                    i{
                                        color: #fff;
                                        font-size: 32px;
                                    }
                                }
                                .text-box{
                                    width: 100%;
                                    height: 36px;
                                    margin-top: 12px;
                                    text-align: center;
                                    padding: 0 16px;
                                    box-sizing: border-box;
                                    line-height: 18px;
                                    font-size: 14px;
                                    .content-text{
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 2;
                                        text-overflow: ellipsis;
                                        word-break: break-all;
                                        width: 100%;
                                    }
                                }
                            }
                            .app-item-more{
                                position: absolute;
                                top: 8px;
                                right: 8px;
                                opacity: 0;
                                transition: all .25s ease-out;
                                color: #9e9e9e;
                                i:hover{
                                    color: #1e88e5;
                                }
                            }
                        }
                        &:hover{
                            .app-item-wrap{
                                background-color: #f5f5f5;
                                border-radius: 12px;
                                -webkit-transform: translateY(-10px);
                                transform: translateY(-10px);
                            }
                            .app-item-more{
                                opacity: 1;
                            }
                        }
                    }
                    .add-app-item-wrap{
                        position: relative;
                        width: 132px;
                        box-sizing: border-box;
                        height: 160px;
                        padding: 10px;
                        margin: 16px 9px 0;
                        .add-app-item{
                            width: 90px;
                            height: 90px;
                            position: relative;
                            border-radius: 50%;
                            background-color: #f5f5f5;
                            color: #a7a7a7;
                            -webkit-transition: all .25s;
                            transition: all .25s;
                            cursor: pointer;
                            width: 88px;
                            height: 88px;
                            margin: 0 auto;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            i{
                                font-size: 26px;
                            }
                            &:hover{
                                background-color: #efefef;
                            }
                        }
                        .btn-name{
                            margin-top: 12px;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}
</style>


